<template>
	<view>
		<cu-custom :bgColor="userType=='20'?'bg-gradual-blue-light':'bg-gradual-orange-light'" title="消息中心"></cu-custom>
		<view  style="overflow: hidden;">
			<view class="aui-news-box">
				<view  class="aui-news-item" v-for="(item, index) in newsList" :key="index">
					<view class="aui-news-item-hd" style="position: relative;">
						<view v-if="item.unreadTotal&&item.unreadTotal>0" style="z-index: 10;" class="cu-tag badge">{{item.unreadTotal>99?'99+':item.unreadTotal}}</view>
						<img :src="item.img" alt="">
					</view>
					<view class="aui-news-item-bd">
						<h5>{{item.title}}</h5>
						<p>{{item.value}}</p>
					</view>
					<span class="aui-news-item-fr">{{item.time}}</span>
				</view>
			</view>
			
			<u-back-top :scroll-top="scrollTop"  top="400" bottom="30"></u-back-top>
		</view>
	</view>
</template>

<script>
	import store from "@/store"
	export default {
		data() {
			return {
				userType:store.state.hh_userType,
				scrollTop: 0,
				old: {
				    scrollTop: 0
				},
				newsList: [{title:'您有一张电子社保卡可以申领',value:'',img:'/static/weixin.png'},
				{title:'您有一笔失业金可以申领',value:'',img:'/static/weixin.png'},
				{title:'金华E人社上线试运行',value:'',img:'/static/weixin.png'}]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
		}
	}
</script>

<style >
	/* #ifdef MP-WEIXIN */
		::-webkit-scrollbar{
		width: 0;
		height: 0;
		color: transparent;
		}
	/* #endif */
.page {
	height: 100vh;
}
.aui-news-box {
    margin-top: 8px;
    background: #fff;
}
.aui-news-item {
    padding: 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.aui-news-item-hd {
    margin-right: .8em;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #fff;
    border-radius: 15px;
}

.aui-news-item-hd img {
    width: 100%;
    max-height: 100%;
    vertical-align: top
}

.aui-news-item-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.aui-news-item-bd h4 {
    font-weight: 400;
    font-size: 16px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
    padding-bottom: 10px;
    color: #333;
}

.aui-news-item-bd p {
    color: #848689;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.aui-news-item:before {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #d8d8d8;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    left: 20px;
}

.aui-news-item-fr {
    text-align: right;
    font-size: 13px;
    color: #8c8c8c;
    margin-top: -25px;
}

</style>
